<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="box">
    <ul id="nav">
      <li>111</li>
      99999
      <li class="two">
        <!-- 子内容 -->
        <a href="#">二0二0</a></li>
      8888888
      <li>333</li>
      <li>444</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
      <li index="0">aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd
        <a href="#">特殊</a>
      </li>
    </ol>
  </div>
  <div id="con">
    <div>
      大兄弟
      <div>
        <span>好</span><span>不好</span>
      </div>
    </div>
  </div>
  <script>
    // 3.	DOM节点类型
    // 节点类型: 文档中的内容，包括标签、文本、注释、标签属性等
    // 文档节点：整个文档
    // 元素节点：每个 HTML 标签
    // 文本节点：包含在 HTML 元素中的文本
    // 属性节点：每一个 HTML 属性
    // 注释节点：注释

    // nodeType 属性返回节点的类型。nodeType 是只读的。
    // 比较重要的节点类型有：
    // 节点类型	NodeType
    // 元素		1
    // 属性		2
    // 文本		3
    // 注释		8

    var two = document.getElementsByClassName("two")[0];
    console.log(two)
    // childNodes  获取所有子节点的集合
    console.log(two.childNodes[1].nodeType) //注释节点的 节点类型 8

    // 3 节点查找
    // DOM节点关系
    // 父子关系
    // 兄弟关系
    // 祖孙关系
    //  1.父元素查找 parentNode 	可返回某节点的父节点。如果指定的节点没有父节点则返回 
    console.log(two.parentNode)
    //2. firstChild 返回被选节点的第一个子节点,如果选定的节点没有子节点，则该属性返回 NULL。
    console.log(two.firstChild)
    //3. lastChild可返回文档的最后一个子节点。
    console.log(two.lastChild)
    //4.previousSibling 可返回某节点之前紧跟的节点（处于同一树层级）
    console.log(two.previousSibling)
    //nextSibling  可返回某个元素之后紧跟的节点（处于同一树层级中）。
    console.log(two.nextSibling)

    //元素查找
    //1 .firstElementChild 第一个子元素
    console.log(two.firstElementChild)
    //2 .lastElementChild 最后一个子元素
    console.log(two.lastElementChild)
    //3.previousElementSibling 返回前一个兄弟元素
    console.log(two.previousElementSibling)
    //4.nextElementSibling 返回下一个兄弟元素
    console.log(two.nextElementSibling.nextElementSibling)
    //5 children返回所有子元素
    var box = two.parentNode.parentNode;
    console.log(box.children) // children 返回是子元素的集合 用下标访问 
    box.children[1].style.background = "blue"

    two.parentNode.parentNode.nextElementSibling.firstElementChild.children[0].lastElementChild.style.color = "red"

  </script>
</body>

</html>